<template>
  <div class="app-container">
    <div style="display:flex;justify-content:end;align-items: center;margin-top: 10px;">
      <div style="text-align:right;margin-bottom: 22px;">
        <el-button-group slot="reference">
          <el-button size="small" icon="el-icon-refresh" @click="getDetail" />
          <el-button size="small" icon="el-icon-plus" @click="listVisible = true">分配房间</el-button>
        </el-button-group>
      </div>
    </div>

    <el-table v-loading="loading" border :data="userList" @sort-change="sortChange">
      <el-table-column label="编号" prop="id" width="50" align="center" />
      <el-table-column label="房间名称" align="center" prop="roomName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user.realName || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user.userSn || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="user.phone||'' ">
        <template slot-scope="scope">
          <span>{{ scope.row.user.phone || '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete"
            @click="removeUser(scope.row, scope.$index)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分配房间 -->
    <el-dialog v-dialogDrag class="form_dialog" title="选择房间" :visible.sync="listVisible" width="800px" top="5vh"
      append-to-body :close-on-click-modal='false'>
      <roomList v-if="listVisible" @checkList="onGetRoomList" :userId="userId"></roomList>
      <div slot="footer">
        <el-button @click="listVisible = false">关 闭</el-button>
        <el-button type="primary" @click="checkItems">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryUserPermis,
} from "@/api/gate/user";
import {
  addUserGates,
  delGateUser
} from "@/api/gate/auth";
import roomList from './components/roomList.vue';

export default {
  components: { roomList },
  data() {
    return {
      //选择房间弹窗
      listVisible: false,
      //选择的房间
      checkedRoomList:[],

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 房间表格数据
      userList: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        realName: undefined,
        userSn: undefined,
      },
      userId: undefined,
    };
  },
  created() {
    this.userId = this.$route.params.userId
    this.getDetail();
  },
  methods: {
    /** 查询房间详情 */
    getDetail() {
      this.loading = true;
      queryUserPermis(this.userId).then(
        response => {
          this.userList = response.data || [];
          this.total = this.userList.length;
          this.loading = false;
        }
      );
    },
    sortChange(column, prop, order) {
      if (column.order === 'ascending') {
        this.queryParams.orderBy = column.prop + ' ' + 'asc'
      } else if (column.order === 'descending') {
        this.queryParams.orderBy = column.prop + ' ' + 'desc'
      } else {
        this.queryParams.orderBy = ''
      }
      this.getDetail()
    },

    //移除门禁人员
    removeUser(row, index) {
      let rId = row.roomId
      if (!rId) {
        return
      }
      this.$confirm('是否确认移除编号为"' + row.id + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delGateUser(rId, row.user.id)
      }).then(() => {
        this.userList.splice(index, 1)
        this.msgSuccess("移除成功");
      })
    },

    // 选择房间数据
    onGetRoomList(list) {
      this.checkedRoomList = list
    },
    //保存选择的房间
    checkItems() {
      if (!this.checkedRoomList.length) {
        return
      }

      let ids = this.checkedRoomList.map(item => item.id)
      let remoteOpenList = this.checkedRoomList.map(item => item.remoteOpen)

      addUserGates(this.userId, ids, remoteOpenList).then(
        response => {
          this.msgSuccess("保存成功");
          this.listVisible = false
          this.getDetail();
        }
      )
    },
  }
};
</script>
